// Copyright 2015 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import '../variables';

%kd-toolbar-logo-placeholder {
  height: 4 * $baseline-grid;
  margin-right: $baseline-grid;
  min-height: 4 * $baseline-grid;
  min-width: 4 * $baseline-grid;
  width: 4 * $baseline-grid;
}

.kd-toolbar-logo {
  @extend %kd-toolbar-logo-placeholder;
}

.kd-toolbar-logo-text {
  @extend %kd-toolbar-logo-placeholder;
  min-width: 14 * $baseline-grid;
  width: 14 * $baseline-grid;
}

.kd-middle-ellipsised-link {
  display: block;
}

.kd-logo-bar {
  flex: 1;
}

.kd-search-bar {
  flex: 2;
}

.kd-global-actions {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

kd-chrome {
  .kd-toolbar {
    background-color: $content-background;
    color: $primary;
    height: 6 * $baseline-grid;
    min-height: 6 * $baseline-grid;
    padding-left: 1.75 * $baseline-grid;

    .kd-global-action-icon {
      color: $primary;
      margin-right: .25 * $baseline-grid;
    }
  }
}

.kd-second-toolbar {
  box-shadow: $whiteframe-shadow-1dp;
  height: 7 * $baseline-grid;
  min-height: 7 * $baseline-grid;
}

.kd-content-div-filled {
  height: 100%;
}

.kd-main-content-div {
  height: 100%;
  position: absolute;
  width: 100%;
}

.kd-main-content-box {
  background-color: transparent;
  overflow-y: auto;
}

.kd-spinner {
  align-content: center;
  align-items: center;
  display: flex;
  flex: 1;
  height: 100%;
  justify-content: center;
  padding-top: 2.5 * $baseline-grid;

  >md-progress-circular {
    margin: 0 auto;
  }
}

body,
.kd-app-entire-content {
  background-color: $body;
  max-height: 100%;
  // Move entire app content below toolbar to avoid elements overlap with
  // shadow (there was propblem with it on IE).
  z-index: 0;
}

.kd-app-content {
  background-color: $body;
  height: 100%;
  max-height: 100%;
  // Set overflow property to disable margin-collapse, which in turn
  // prevents scrollbar from being always visible.
  overflow-x: hidden;
  position: relative;

  >.md-body-1 {
    &:not(.kd-content-div-filled) {
      padding-bottom: 4 * $baseline-grid;
    }
  }
}

a {
  color: $primary;
  text-decoration: inherit;
}

.kd-success {
  color: $success-color;
}

.kd-error {
  color: $error-color;
}

.kd-warning {
  color: $warning;
}

.kd-toolbar-tools {
  height: 7 * $baseline-grid;
  margin: auto;
  padding-left: $baseline-grid;
}

.kd-text-icon {
  font-size: inherit;
  height: inherit;
  vertical-align: middle;
}

.kd-comma-separated-item {
  display: inline-block;

  &:not(:last-child) {
    &::after {
      content: ',';
    }
  }
}

.kd-pre-block {
  margin: 0;
  min-width: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

$chip-margin: 0 $baseline-grid ($baseline-grid / 2) 0;

// Style taken(mostly) from angular material md-chip style.
.kd-chips {
  background-color: $body;
  border-radius: $baseline-grid;
  display: inline-block;
  margin: $chip-margin;
  max-width: 100%;
  vertical-align: bottom;
}

.kd-chip {
  display: block;
  padding: ($baseline-grid / 4) $baseline-grid;
}

.kd-chips-switch {
  color: $primary;
  cursor: pointer;
  margin-left: -$baseline-grid / 2;
  outline: none;
  padding: ($baseline-grid / 4) $baseline-grid;
}

// Style scrollbars on Webkit-based browsers (e.g., Chrome or Safari).
* {
  &::-webkit-scrollbar {
    background: transparent;
    height: $baseline-grid;
    width: $baseline-grid;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $delicate;
  }
}
